<template>
	<view class="popup_box">
		<u--form labelPosition="top" :model="passwordModel" labelWidth="140" :rules="rules" ref="form">
			<view class="phone">

				{{$store.state.userInfo.isSetPayPsw == 0?"设置支付密码":"修改支付密码"}}
			</view>
			<u-form-item prop="oldPayPwd" label="请输入6位支付密码" v-if="showOldPayPwd">
				<u-code-input :focus="true" :dot="true" :key="1" v-model="passwordModel.oldPayPwd" :maxlength="6"
					@finish="handlerOldPayPwdFinish"> </u-code-input>

			</u-form-item>
			<u-form-item prop="payPwd" v-if="showPayPwd" label="请设置6位支付密码">
				<u-code-input autocomplete="true" :dot="true" :focus="true" v-model="passwordModel.payPwd"
					:maxlength="6" @finish="handlerPayPwdFinish"></u-code-input>
			</u-form-item>
			<u-form-item prop="conPayPwd" v-if="showConPayPwd" label="请再次输入支付密码">
				<u-code-input :focus="true" :dot="true" :key="3" v-model="passwordModel.conPayPwd" :maxlength="6"
					@finish="handlerConPayPwdFinish"></u-code-input>
			</u-form-item>
			<view class="set_pay_pwd_tip" v-if="showPayPwd">
				<view class="tip">避免使用连续或重复的数字</view>
				<view class="tip">避免使用手机号、证件号中的连续数字</view>
			</view>
		</u--form>
		<u-button type="error" v-if="showConPayPwd" text="提交" customStyle="margin-top: 20px" @click="submit"
			:loading="loading">
		</u-button>
		<view class="close">
			<u-icon name="close-circle-fill" size="30" color="#EB7C7C" @click="handlerClosePayPasswordClose">

			</u-icon>
		</view>


	</view>
</template>

<script>
	import {
		settingPayPwd,
		verifyOldPayPwd
	} from '@/config/api';
	export default {
		props: {
			setPayPasswordShow: {
				type: Boolean,
			}
		},

		data() {
			return {
				passwordModel: {
					oldPayPwd: "",
					payPwd: "",
					conPayPwd: ""
				},
				rules: {
					'oldPayPwd': {
						required: true,
						message: '请输入现在的登录密码',
						trigger: ['blur', 'change']
					},
					'payPwd': [{
							required: true,
							message: '请输入6位支付秘密',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (this.passwordModel.oldPayPwd == value) {
									callback(new Error('新旧密码不能相同'));
								} else {
									// 如果校验通过，也要执行callback()回调
									callback();
								}
							},

							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.rangeLength(value, [6, 6]);
							},
							message: '支付密码需为6为',
							trigger: ['change', 'blur'],
						}
					],
					'conPayPwd': {
						validator: (rule, value, callback) => {
							return this.passwordModel.payPwd == value;
						},
						message: '两次输入密码不一致',
						trigger: ['change', 'blur'],
					},

				},
				loading: false,


				showOldPayPwd: false,
				showPayPwd: false,
				showConPayPwd: false,
				source: 0,

			};
		},


		created() {

			if (this.$store.state.userInfo.isSetPayPsw == 0) {
				this.showPayPwd = true;
			}
			if (this.$store.state.userInfo.isSetPayPsw == 1) {
				this.showOldPayPwd = true;
			}
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			let curParam = routes[routes.length - 1].options; //获取路由参数
			if (curParam.source) {
				this.source = curParam.source;
			}
		},
		mounted() {

		},
		methods: {
			handlerClosePayPasswordClose() {
				this.$emit('update:setPayPasswordShow', false);
				if (this.source == 1) {
					uni.navigateBack();
				}

			},
			//旧密码输入完成
			async handlerOldPayPwdFinish() {
				const params = {
					oldPayPwd: this.passwordModel.oldPayPwd
				};
				try {
					let res = await verifyOldPayPwd(params);

					this.showOldPayPwd = false;
					this.showPayPwd = true;
				} catch (e) {
					this.passwordModel.oldPayPwd = "";
				}


			},
			//新密码输入完成
			handlerPayPwdFinish() {
				this.showPayPwd = false;
				this.showConPayPwd = true;
			},
			handlerConPayPwdFinish() {
				if (this.passwordModel.payPwd != this.passwordModel.conPayPwd) {
					uni.$u.toast("两次密码输入不一致，请重新设置");
					this.showConPayPwd = false;
					this.showPayPwd = true;
					this.passwordModel.payPwd = "";
					this.passwordModel.conPayPwd = "";

				}
			},
			// 提交修改绑定手机号
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(async validate => {
					console.log(this.passwordModel);

					const params = {
						payPwd: this.passwordModel.payPwd
					};
					let res = await settingPayPwd(params);
					if (res) {
						uni.$u.toast("支付密码设置成功");

						//设置成功 
						let userInfo = this.$store.state.userInfo;
						userInfo.isSetPayPsw = 1;
						this.$store.commit('setUserInfo', userInfo);
						this.$emit('update:setPayPasswordShow', false);
						if (this.source == 1) {
							uni.navigateBack();
						}
					}
				}).catch(errors => {
					console.log(errors);

				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup_box {
		width: 602rpx;
		padding: 40rpx;
		position: relative;

		.title {
			text-align: center;
			font-size: 32rpx;
		}

		.phone {
			padding: 0 0 20rpx 0;
			font-size: 28rpx;
			text-align: center;
		}

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}

		.set_pay_pwd_tip {
			color: #949494;
		}
	}
</style>
